<template>
	<view>
		<form @submit="formSubmit">
			<view class="uni-form-item item_horizon">
				<view class="title">名称</view>
				<input type="text" placeholder="请输入名称..." v-model="addForm.merchant.name">
			</view>
			<view class="uni-form-item item_horizon">
				<view class="title">人均</view>
				<input type="text" placeholder="请输入人均消费..." v-model="addForm.merchant.price">
			</view>
			<view class="uni-form-item item_horizon">
				<view class="title">地址</view>
				<input type="text" placeholder="请选择地址..." @focus="chooseLocation" v-model="address.address">
			</view>
			<view class="uni-form-item item_horizon">
				<view class="title">电话</view>
				<input type="text" placeholder="请填写店家联系方式(选填)..." v-model="addForm.merchant.telephone">
			</view>
			<view class="uni-form-item item_horizon">
				<view class="title">推荐指数</view>
				<slider value="100" @change="sliderChange" min="1" max="5" show-value activeColor="#F0AD4E"/>
			</view>
			
			<view class="uni-form-item ">
				<view class="title-field">
					<view class="title food-title" >店铺美食</view>
					<button class="food_btn" @click="addFoodItem">+</button>
					<button class="food_btn" @click="subFoodItem">-</button>
				</view>
				<view class="food-item" v-for="item in foodItems">
					<view class="title">店铺美食{{item+1}}</view>
					<view class="img-field food-img-field">
						<image class="img-add"  v-if="foodImagepaths[item]" :src='foodImagepaths[item]'></image>
						<view class="img-add" @click="addFoodImage" v-if="foodImagepaths[item]==null">
						<text>+</text>
						</view>
					</view>
					<input type="text" class="food-item-title" placeholder="请输入名称..." >
					<input type="text" class="food-item-describe" placeholder="请输入该美食描述..." >
				</view>
			</view>
			<view class="uni-form-item ">
				<view class="title">商家环境</view>
				<view class="img-field">
					<image class="img-add" v-for="item in imagepaths" v-if="imagepaths" :src='item'></image>
					<view class="img-add" @click="addImage">
					<text>+</text>
					</view>
				</view>
			</view>
			<view class="uni-form-item ">
				<view class="title">店铺分享理由</view>
				<textarea  placeholder="请输入分享理由..." auto-height v-model="addForm.merchant.reason" />
			</view>
			
			<view class="space">
				
			</view>
			<button class="submit_btn" form-type="submit" >提交</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addForm:{
					article:{
						pictures:[
							{
								filePath:""
							},
							{
								filePath:""
							}							
						]
					},
					merchant:{
						name:'',
						index:'',
						reason:'',
						price:'',
						addressY:0,
						addressX:0,
						telephone:'',
						dashes:[{
							name:"",
							url:"",
							description:""
						},
						{
							name:"",
							url:"",
							description:""
						}												
						],
						
					},
					userID:10001
				},
				imagepaths:[],
				foodImagepaths:[],
				address:'',
				foodItems:1
				
			}
		},
		methods: {
			sliderChange(e){
				this.addForm.merchant.index=e.detail.value
			},
			formSubmit(){
				var that=this
				uni.showModal({
				    title: '提示',
				    content: '是否确认发布？',
				    success: function (res) {
				        if (res.confirm) {
				           that.Submit()
						   uni.switchTab({
						   	url:'/pages/index/index'
						   })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			async Submit(){
				var that=this
				this.addForm.merchant.addressY=this.address.latitude
				this.addForm.merchant.addressX=this.address.longitude
				console.log(this.addForm)
				const res=await this.$myDoPost({
					url:'/MerchantArticle/api/addMerchantArticle',
					data:that.addForm
				})
				
			},
			chooseLocation(){
				var that=this;
				uni.chooseLocation({
					latitude: 30.526230995480322,
					longitude: 114.35812750362396,
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        that.address=res
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
			},
			addImage(){
				var that=this;
				uni.chooseImage({
				    count: 3, 
				    sourceType: ['album'], //从相册选择
				    success: (res) => {			
				       res.tempFilePaths.forEach(item=>
					   {
						   that.imagepaths.push(item)
					   })
						
				    }
				});
			},
			addFoodImage() {
				var that=this;
			    uni.chooseImage({
			        count: 1, 
			        sourceType: ['album'], //从相册选择
			        success: (res) => {			
			           res.tempFilePaths.forEach(item=>
					   {
						   that.foodImagepaths.push(item)
					   })
						
			        }
			    });
			},
			addFoodItem(){
				this.foodItems++
			},
			subFoodItem(){
				this.foodItems>1?this.foodItems--:this.foodItems;
			}
		}
	}
</script>

<style lang="less">
	.submit_btn{
		background-color:#F0AD4E;
		color: #FFFFFF;
	}
	.food_btn{
		width:40rpx;
		height:40rpx;
		line-height: 40rpx;
		color:#FFFFFF;
		text-align: center;
		display: inline-block;
		border-radius: 50%;
		border: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: 10rpx;
		background-color:#F0AD4E;
		font-weight: 600;
		font-size: 40rpx;
	}
	page{
		padding-top:50rpx;
	}
	.item_horizon{
			display: flex;
	}
	.item_img{
		margin-top: 100rpx;
	}
	.space{
		width:100%;
		height: 70px;
	}
.uni-form-item{
	padding-left: 40rpx;
	padding-right: 40rpx;
	justify-content: space-between;
	align-items: center;
	margin-bottom:30rpx ;
	input{
	height: 80rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	background: #fff;
	width:80%;
	border: 1px solid #f8f8f8;
	border-radius: 10rpx;
	}
	textarea{
		background: #fff;
		width:100%;
		min-height: 200rpx;
		border: 1px solid #f8f8f8;
		border-radius: 10rpx;
		float: right;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		
	}
	slider{
		width:70%;
	}
	.food-item{
		.food-item-title{
			margin-top:20rpx;
			width:60%;
			height: 50rpx;
		}
		.food-item-describe{
			margin-top:10rpx;
			width:60%;
			height:160rpx;
		}
	}

	.food-title{
		float:left;
	}
	.food-img-field{
		float: left;
	}
	.img-field{
		display: flex;
		margin-top:20rpx;

		.img-add{
			width:200rpx;
			height:220rpx;
			text-align: center;
			background-color:#C0C0C0;
			margin-right: 10rpx;
			text{
				font-size: 50px;
				line-height: 100px;
			}
		}
	}
}

</style>
